//table组件
Vue.component('xz-table', {
  props: {
    columns: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    }
  },
  template: `
  <table cellpadding="10" >
    <thead>
      <tr>
        <th v-for="thItem in columns">{{thItem.title}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="trItem in data">
        <td v-for="tdItem in columns">
          <template v-if="tdItem.render">
          <span v-html="tdItem.render(trItem)"></span>
          </template>
          <template v-else>
         {{trItem[tdItem.key]}}</template>
       </td>
      </tr>
    </tbody>
  </table>
  `
})
//element-ui-table
Vue.component("qfTableColumn", {
  props: ['prop', 'label'],
  template: `<span />`,
  mounted() {
    //console.log(this);
    //console.log(this.$parent);
    this.$parent.column.push(this)
  }
});

Vue.component("qfTable", {
  data() {
    return {
      column: [

      ],
    }
  },
  mounted() {
    console.log(this.column);
    console.log(this.column[4].$scopedSlots.default({ sex: 1 })[0].text);
  },
  props: {
    data: {
      type: Array,
      default: []
    }
  },
  template: `<table border="1" cellpadding="10" cellspacing="0">
    <thead>
     <tr>
       <th v-for="item in column">{{item.label}}</th>
     </tr>
    </thead>
    <tbody>
    <tr v-for="row in data">
      <!-- 
        <td>{{row.id}}</td>
      <td>{{row.name}}</td>
      <td>{{row.age}}</td>
      <td>暂不写</td>
        -->
      <td v-for="(col,i) in column">
        {{column[i].$scopedSlots.default ? column[i].$scopedSlots.default(row)[0].text : row[col.prop]}}
        </td>
    </tr>
     <!-- 默认插槽：因为调用了所以才提示组件不存在 -->
     <slot></slot>
    </tbody>
  </table>`,
});
//page组件
Vue.component('xz-page', {
  props: {
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      totalPage: 0
    }
  },
  watch: {
    total: {
      handler(newdata) {
        //console.log(newdata);
        this.totalPage = Math.ceil(this.total / this.pageSize)
        //console.log(this.totalPage);
      },
      immediate: true
    }
  },
  template: `
    <div class="xz-page">
    <span v-for="num in totalPage" @click="$emit('click-page',num)">{{num}}</span>
    
    </div>
  `
})
//dialog对话框组件
Vue.component('xz-dialog', {
  props: {
    title: {
      type: String,
      default: '默认标题'
    },
    content: String,
    visible: {
      type: Boolean,
      default: false,
    }
  },
  template: `
  <div class="xz-dialog" v-if="visible">
    <div class="box">
      <div class="header">{{title}}</div>
      <div class="main">
      {{content}}
      </div>
      <div class="footer">
      <button @click="$emit('update:visible',false)">取消</button>
      <button>确定</button>
      </div>
    </div>
  </div>
  `
})

//loading2组件
Vue.component('loading2', {
  props: {
    state: {
      type: Boolean,
      default: false
    }
  },
  template: `
  <div class="xzloading2" v-if="state" @click="$emit('update:state',false)">
  <span>loading...</span>
  </div>
  `
})
//loading1组件
Vue.component('loading1', {
  props: {
    state: {
      type: Boolean,
      default: false
    }
  },
  template: `
  <div class="xzloading" v-if="state">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
  
  `
})

//按钮组件
Vue.component('xzButton', {
  props: {
    content: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: 'primary'
    }
  },
  template: `
  <button :class="['xz-button', 'xz-button--'+type, 'xz-button--normal']  ">
  <div class="xz-button__content">
  <span class="xz-button__text">{{content}}</span>
  </div>
  </button>
  `

})

//导航栏组件
Vue.component('navBar', {
  props: {
    title: String,
    leftArrow: Boolean //默认为true 写了就不显示
  },
  template: `
  <header>
    <span @click="$emit('click-left')" >
    {{leftArrow ? '<返回' : ' '}}
    </span>
    <div>{{title}}</div>
    <span class="iconfont icon-sousuotianchong" @click="$emit('click-right')"></span>
  </header>
  `
})
Vue.component('xiaozhi', {
  props: {
    state: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      fromData: {
        account: '',
        password: ''
      }
    }
  },
  template: `
  <fieldset>
  <legend>xiaozhiUI</legend>
    账号:<input type="text" v-model="fromData.account">
    密码:<input type="password" v-model="fromData.password">
    <button v-if="state" @click="$emit('upfromdata',fromData)">提交</button>
  </fieldset>
  `
})

